// 引入模块化样式
import style from './login.module.scss'
import initLoginBg from './init.ts'
import { ChangeEvent, useEffect, useState } from 'react'
import { Input, Button, Space, message } from 'antd'
import { useNavigate } from 'react-router-dom'
import 'antd/dist/antd.css';
import './login.less'
// 引入请求
import { CaptchaAPI,LoginAPI } from '@/request/api.ts';
import { log } from 'console';

const View = () => {
    const navigateTo = useNavigate()
    // 组件加载完毕之后执行下面这个useEffect钩子函数
    // useEffect中的第一个参数函数就也只会在组件渲染完毕后再执行，而下面设置了依赖，所以useEffect的第一个参数函数只会在当前组件初始化完毕后才会触发
    useEffect(() => {
        initLoginBg();
        // 下面是窗口大小发生改变的时候触发事件
        window.onresize = function () { initLoginBg() }

        // 组件渲染完毕的时候就调用方法，向服务器发起请求，返回一个验证码
        getCaptchaImg()
    }, [])   // 第二个参数是设置依赖，如果是一个空数组，则意味Effect只会在组件初始化时触发一次

    // 获取用户输入的信息   用户名和密码是提供的，所以这里给用户名和密码赋予初始值
    const [usernameVal, setUsernameVal] = useState("qdtest1"); // 定义用户输入用户名这个变量
    const [passwordVal, setPasswordVal] = useState("123456"); // 定义用户输入密码这个变量
    const [captchaVal, setCaptchaVal] = useState("888888");   // 定义用户输入验证码这个变量
    // 定义一个变量保存验证码图片的路径信息
    const [captchaImg, setCaptchaImg] = useState("");

    const usernameChange = (e: ChangeEvent<HTMLInputElement>) => {
        // 获取用户输入的用户名
        // console.log(e.target.value);
        setUsernameVal(e.target.value);
    }
    const passwordChange = (e: ChangeEvent<HTMLInputElement>) => {
        setPasswordVal(e.target.value);
    }
    const captchaChange = (e: ChangeEvent<HTMLInputElement>) => {
        setCaptchaVal(e.target.value);
    }

    // 登录按钮的事件回调
    const gotoLogin = async ()=>{
        // 验证 如果表单项中有空值
        if(!usernameVal.trim() || !passwordVal.trim() || !captchaVal.trim()){
            message.warning("请输入完整的用户信息")
            return
        }
        
        // 发起登录请求
        const loginAPIRes = await LoginAPI({    // 调用登录的请求，并且将用户信息作为参数传递给服务器
            username:usernameVal,
            password:passwordVal,
            code:captchaVal,
            uuid:localStorage.getItem("uuid") as string
        })
        console.log(loginAPIRes);
        if(loginAPIRes.code === 200){
            // 1.提示登录成功
            message.success('登录成功')
            // 2.保存token
            localStorage.setItem("jvtc-react-management-token",loginAPIRes.token)
            // 3.跳转路由路径 /page1
            navigateTo("/page1")    // 利用Navigate钩子将路由路径进行重定向
            // 4.删除本地存储的uuid
            localStorage.removeItem("uuid")
        }
    }

    // 点击验证码图片盒子的事件回调
    const getCaptchaImg = async ()=>{   // await必须在async函数中使用
        // 发送请求，如果请求成功，那么就会把成功结果赋值给captchaAPIRes
        const captchaAPIRes = await CaptchaAPI()    // CaptchaAPI()会返回一个Promise，而await可以接收到成功的Promise的值，如果这个请求成功，那么就会await就会接收到请求成功的结果
        console.log(captchaAPIRes);
        if(captchaAPIRes.code === 200){ // 当code值为200的时候，证明请求成功
            // 1.把验证码图片数据显示在img标签上
            setCaptchaImg('data:image/gif;base64,'+captchaAPIRes.img)   // 拼接一下字符串，然后存储
            // 2.本地存储uuid，登录的时候用
            localStorage.setItem("uuid",captchaAPIRes.uuid)
        }
    }

    return (
        // 由于上面的style是模块化样式引入，所以可以使用下面这种方式按需使用样式
        <div className={style.loginPage}>
            {/* 存放背景 */}
            <canvas id="canvas" style={{ display: "block" }}></canvas>
            {/* 登录盒子 */}
            <div className={style.loginBox + " loginbox"}>
                {/* 标题部分 */}
                <div className={style.title}>
                    <h1>九江职院&nbsp;·&nbsp;通用后台系统</h1>
                    <p>Strive Everyday</p>
                </div>
                {/* 表单部分 */}
                <div className="form">
                    <Space direction="vertical" size="large" style={{ display: 'flex' }}>
                        <Input placeholder="用户名" onChange={usernameChange} value={usernameVal} />
                        <Input.Password placeholder="密码" onChange={passwordChange} value={passwordVal} />
                        {/* 验证码盒子 */}
                        <div className="captchaBox">
                            <Input placeholder="验证码" onChange={captchaChange} value={captchaVal} />
                            <div className="captchaImg" onClick={getCaptchaImg}>
                                <img height="38" src={captchaImg} alt="" />
                            </div>
                        </div>
                        <Button type="primary" className="loginBtn" block onClick={gotoLogin}>登录</Button>
                    </Space>
                </div>
            </div>
        </div>
    )
}

export default View